<template>
  <div class="home">
    <div class="header">
      <div class="title">小蓝的 BWIKI 工具箱</div>
      <div class="version">版本: 0.0.1</div>
      <div class="action">
        <div @click="logout">退出登陆</div>
      </div>
    </div>
    <el-form ref="searchWiki" :model="searchWiki" class="search-wiki" label-width="80px">
      <el-form-item label="查找页面">
        <el-input v-model="searchWiki.name"></el-input>
      </el-form-item>
    </el-form>
    <div class="wikipage-name">{{ title }}</div>
    <div class="wikipage-wikitext">
      <el-input type="textarea" v-model="wikitext" resize="none"></el-input>
    </div>
    <div class="wikipage-action">
      <el-button type="primary" @click="submit">提交修改</el-button>
    </div>
  </div>
</template>

<script>
const { ipcRenderer } = window.require('electron')

export default {
  name: 'Home',
  data() {
    return {
      searchWiki: {
        name: ''
      },
      title: '',
      wikitext: '',
      csrftoken: ''
    }
  },
  watch: {
    'searchWiki.name'(val) {
      if (val) {
        this.debouncedGetWikitext()
      }
    }
  },
  created() {
    this.debouncedGetWikitext = _.debounce(this.getWikitext, 500)
  },
  methods: {
    logout() {
      ipcRenderer.sendSync('clear-status')
      this.$message({
        message: '退出登陆成功',
        type: 'success'
      })
      this.$router.push({ name: 'LoginIndex' })
    },
    getWikitext() {
      axios.get('https://wiki.biligame.com/zqwn/api.php', {
        params: {
          action: 'parse',
          page: this.searchWiki.name,
          prop: 'wikitext',
          format: 'json'
        }
      })
        .then((response) => {
          if ('error' in response.data) {
            return
          }

          this.title = response.data.parse.title
          this.wikitext = response.data.parse.wikitext['*']
        })
        .catch((error) => {
          console.log(error)
        })
    },
    submit() {
      if (!this.title) {
        return
      }

      const loading = this.$loading({
        lock: true,
        text: '正在提交修改',
        background: 'rgba(0, 0, 0, 0.55)'
      })

      axios.get('https://wiki.biligame.com/zqwn/api.php', {
        params: {
          action: 'query',
          meta: 'tokens',
          format: 'json'
        }
      })
        .then((response) => {
          this.csrftoken = response.data.query.tokens.csrftoken

          if (this.csrftoken !== '+\\') {
            let params = new URLSearchParams()
            params.append('action', 'edit')
            params.append('title', this.title)
            params.append('text', this.wikitext)
            params.append('token', this.csrftoken)
            params.append('format', 'json')

            axios({
              method: 'post',
              url: 'https://wiki.biligame.com/zqwn/api.php',
              data: params
            })
              .then((response) => {
                if (response.data.edit.result === 'Success') {

                  axios.get('https://wiki.biligame.com/zqwn/api.php', {
                    params: {
                      action: 'parse',
                      page: this.searchWiki.name,
                      prop: 'wikitext',
                      format: 'json'
                    }
                  })
                    .then((response) => {
                      loading.close()

                      if ('error' in response.data) {
                        return
                      }

                      this.wikitext = response.data.parse.wikitext['*']

                      this.$message({
                        message: '编辑成功',
                        type: 'success'
                      })
                    })
                    .catch((error) => {
                      loading.close()

                      console.log(error)
                    })
                }
                else {
                  this.$message.error('编辑失败')
                }
              })
              .catch((error) => {
                loading.close()

                console.log(error)
              })
          }

          else {
            this.$router.push({ name: 'LoginIndex' })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #dcdfe6;
    .title {
      font-size: 20px;
      color: #409eff;
    }
    .version {
      margin-left: 40px;
    }
    .action {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      & > div {
        opacity: 0.5;
        color: #1989fa;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
  .search-wiki {
    padding: 14px 20px;
    border-bottom: 1px solid #dcdfe6;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .wikipage-name {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #dcdfe6;
    font-size: 22px;
    font-weight: bold;
  }
  .wikipage-wikitext {
    flex: 1;
    display: flex;
    padding: 20px 20px 0 20px;
  }
  .wikipage-action {
    margin-top: 10px;
    padding: 0 20px 20px 20px;
    text-align: right;
  }
}
</style>

<style lang="scss">
.home {
  .wikipage-wikitext {
    .el-textarea__inner {
      height: 100%;
    }
  }
}
</style>